
import {
    ActionType,
    FooterToolbar,
    PageContainer,
    ProCard,
    ProColumns,
    ProForm,
    ProFormInstance,
    ProFormText,
    ProTable,
} from '@ant-design/pro-components';
import { Button, Col, Divider, message, Popconfirm, Row } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import EditModal from './components/EditModal';
import { deleteApi, selectListApi, selectOneApi } from './services';
import { DeleteOutlined, FormOutlined } from '@ant-design/icons';
import { useModel, useParams } from '@umijs/max';
import FieldList from './components/FieldList';
import IndexList from './components/IndexList';

const Page: React.FC<unknown> = () => {
    const id = useParams().id;
    const { formRef ,tab,setTab,selectOne,onFinish,createCodeClick} = useModel('TableInfo.model', (model) => ({
        formRef:model.formRef,
        tab:model.tab,
        setTab:model.setTab,
        selectOne:model.selectOne,
        onFinish:model.onFinish,
        selectByParentId:model.selectByParentId,
        createCodeClick:model.createCodeClick
    }));
    useEffect(() => {
        selectOne(id)
    }, [])

    return (
        <PageContainer
            header={{
                title: '表设置详情',
            }}
        >
            <ProForm
                {...{
                    labelCol: { span: 6 },
                    wrapperCol: { span: 16 },
                }}
                formRef={formRef}
                layout='horizontal'
                onFinish={onFinish}
                submitter={{
                    render: (_, dom) => <FooterToolbar>
                        <Button type="primary" onClick={createCodeClick}>生成代码</Button>
                        {dom}
                    </FooterToolbar>,
                }}
            >
                <Row>
                    <Col span={12}>
                        <ProFormText
                            disabled
                            name='name'
                            label="表名称"

                        />
                    </Col>
                    <Col span={12}>
                        <ProFormText
                            disabled
                            name='comment'
                            label="描述"
                        />
                    </Col>
                </Row>
                <ProCard
                    tabs={{
                        tabPosition: "top",
                        activeKey: tab,
                        items: [
                            {
                                label: `字段信息`,
                                key: 'tab1',
                                children: <FieldList />,
                            },
                            {
                                label: `索引`,
                                key: 'tab2',
                                children: <IndexList/>,
                            },

                        ],
                        onChange: (key) => {
                            setTab(key);
                        },
                    }}
                />
            </ProForm>
        </PageContainer>
    );
};

export default Page;



